import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Button, Avatar } from '@material-ui/core';
import { CardBase } from 'components/organisms';
import { colors } from '@material-ui/core';
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from "react-router-dom";
import { setLoading, setCallbackError } from 'redux/actions/LoadingActions';
import { callPostApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
  answerCount: {
    padding: theme.spacing(1 / 2, 1),
    borderRadius: theme.spacing(1),
    background: theme.palette.secondary.light,
    color: 'white',
    fontWeight: 700,
    marginTop: theme.spacing(2),
  },
  buttonGrid: {
    width: '90%',
    marginTop: '30px',
    display: 'flex',
    justifyContent: 'center'
  },
  avatar: {
    width: '100px',
    height: '100px',  
  },
  title: {
    color: '#000',
    fontWeight: 'bold',
    marginTop: '20px',
    marginBottom: '10px'
  },
  divider: {
    width: '1px',
    height: '30px',
    marginTop: '5px',
    marginLeft: '10%',
    marginRight: '10%',
    backgroundColor: colors.grey[500]
  },
  votes: {
    width: '90%',
    marginTop: '20px',
    display: 'flex',
    justifyContent: 'center'
  },
  voteButton: {
    width: '70%',
    backgroundColor: '#4051b5', 
    color: '#FFFFFF'
  },
  votingButton: {
    width: '70%',
    backgroundColor: '#6b096b', 
    color: '#FFFFFF'
  },
  disabledButton: {
    width: '70%',
    backgroundColor: '#aaaaaa', 
    color: '#FFFFFF'
  },
  listItemIcon: {
    width: '40px',
    height: '40px', 
    border: '2px solid',
    borderColor: colors.blue[900],
    marginLeft: '10%',
    display: 'flex',
    justifContent: 'center',
    alignItems: 'center'
  },
  closeIcon: {
    justifyContent: 'flex-end',
    cursor: 'pointer',
  }
}));

const User = props => {
  const { data, voting, setVoting, className, ...rest } = props;

  const classes = useStyles();
  const dispatch = useDispatch();
  const history = useHistory();
  
  const profileData = useSelector((state) => state.auth.profileData)
  
  const updateVoting = (artistID) => {
    if (!profileData || !profileData.id) {
      history.push(`signin`);
      return;
    }

    const param = { user_id: profileData.id, artist_id: artistID }
    callPostApi('vote/update_vote', param, dispatch, (data) => {
      setVoting(data);
    })
  }

  const openLink = (link) => {
    if (link.includes('http')) {
      window.open(link, '_blank');
    }
    else {
      link = 'https://' + link;
      window.open(link, '_blank');
    }    
  }

  return (
    <CardBase
      liftUp
      variant="outlined"
      style={{ borderTop: `5px solid ${colors.indigo[500]}` }}
    >
      <Avatar {...{ src: data.avatarURL} } className={classes.avatar} />
      <Typography variant="body1" align="center" className={classes.title}>
        {data.name}
      </Typography>
      <Typography variant="body1" align="center">
        {data.vote_title}
      </Typography>
      <a href={data.vote_link.includes('http')?data.vote_link:('https://' + data.vote_link)} target="_blank" rel="noopener noreferrer">
        {data.vote_sub_title}
      </a>
      {/* <Button
        component="a"
        onClick={e => openLink(data.vote_link)}
      >
        {data.vote_sub_title}
      </Button> */}
      <Typography variant="body2" align="center">
        
      </Typography>
      <div className={classes.votes}>
        <div>
          <Typography variant="body1" align="center">
            {data.albumCount}
          </Typography>
          <Typography variant="body1">
            Albums
          </Typography>
        </div>
        <div className={classes.divider}></div>
        <div>
          <Typography variant="body1" align="center">
            {data.songCount}
          </Typography>
          <Typography variant="body1">
            Songs
          </Typography>
        </div>
      </div>      
      <div className={classes.buttonGrid}>
        {voting&&voting.status&&voting.artist_id != data.id ? 
        (<Button variant="contained" 
          className={classes.disabledButton} 
          onClick={e => dispatch(setCallbackError("You've already voted for the category!"))}>
          {"Vote"}
        </Button>):(
        <Button variant="contained" 
          className={voting&&voting.status ? classes.votingButton : classes.voteButton} 
          onClick={e => updateVoting(data.id)}>
          {voting&&voting.status ? "Remove" : "Vote"}
        </Button>
        )}
      </div>
    </CardBase>
  );
};

User.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.object.isRequired,
};

export default User;
